<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/feedback.css"/>
		<style>
			body,.mui-content {
				background: white;
			}
			
			#top {
				width: 91%;
				height: 130px;
				background-image: linear-gradient(-20deg, #619EB2  0%, #005F80 100%);
				margin: 10px auto;
				border-radius: 10px;
				box-shadow: 3px 3px 5px #888888;
			}
			
			#top .info_img {
				width: 25%;
				font-size: 15px;
				text-align: center;
				height: 60px;
				margin-top: 15px;
				font-weight: bold;
			}
			
			#top .info_img img {
				width: 60px;
				height: 60px;
				border-radius: 50%;
			}
			
			#top .doc-info{
				width: 75%;
				/*background-color: pink;*/
				height: 85px;
				padding-top: 15px;
			}
			
			/*.mui-title,header .mui-icon{
				color: #8cb33e;
			}
			.mui-icon:active{
				color: #8cb33e;
			}*/
			
			
			.doc-info .doc-1{
				display: inline-block;
				width: 100%;
				padding-right: 10px;
				overflow: hidden;
				height: 23px;
			}
			
			.doc-info .doc-1 .doc-name{
				font-size: 16px;
				color: #FFFFFF;
				font-weight: bold;
			}
			
			.doc-info .doc-1 .doc-title{
				font-size: 13px;
				color: #FFFFFF;
			}
			
			.doc-info .doc-1 .doc-my{
				display: inline-block;
				padding: 0 5px;
				font-size: 12px;
				color: #FFFFFF;
				background-color: #294149;
				border-radius: 5px;
			}
			.doc-my .mui-icon,.focus .mui-icon{
				font-size: 14px !important;
				/* color: #FFFFF; */
			}
			
			.doc-info .doc-1 .focus{
				right: 5px;
				padding: 0 5px;
				font-size: 12px;
				color: #FFFFFF;
				background-color: #294149;
				border-radius: 5px;
				height: 21px;
				line-height: 21px;
			}
			
			.bg {
				height: 10px;
				background: #EFEFF4;
			}
			
			.info_tag_box{
				display: inline-flex;
			}
			
			.info_tag_box .tag{
				display: inline-block;
				background-color: #CCE2E9;
				color: #797979;
				padding: 1px 10px;
				margin-right: 5px;
				font-size: 12px;
			}
			
			
			
			
			
			
			
			#mui-icon-gear .mui-icon-gear {
				font-weight: bold;
			}
						
			#top .top-info {
				width: 80%;
				height: 60px;
				float: left;
				margin-left: 30px;
			}
			
			#top .top-info .top-info-img {
				width: 23%;
				height: 100%;
				float: left;
			}
			
			#top .top-info .top-info-name {
				width: 77%;
				height: 100%;
				float: left;
			}
			
			#top .top-info .top-info-img img {
				
			}
			
			.user-name-box {
				margin-left: 5px;
				line-height: 35px;
			}
			
			.user-id {
				margin-left: 5px;
				color: white;
				font-weight: bold;
				font-size: 12px;
				line-height: 20px;
			}
			
			.user-name {
				color: white;
				font-weight: bold;
				font-size: 15px;
			}
			
			.user-name:hover {
				color: white;
			}
			
			.user-lever {
				color: #F9D50D;
				font-weight: bold;
				font-size: 15px;
			}
			
			.user-lever:hover {
				color: #FFFF00;
			}
			

			
			.box-top {
				padding: 10px 20px;
				font-weight: bold;
				font-size: 15px;
				color: #8cb33e;
			}
			
			.begood{
				height: 160px;
			}
			.begood p{
				color: #999;
				padding: 0px 20px;
				font-size: 12px;
			}
			
			
			.inquiry-price{
				display: flex;
				height: 60px;
				width: 100%;
				padding: 5px 20px;
				/*align-items: center;*/
				/*flex-direction:column;*/
				justify-content: center;
				align-items: center;
			}
			
			.item-inquiry-price{
				width: 30%;
				height: 100%;
				/*background-color: pink;*/
				margin-right: 10px;
			}
			
			.item-inquiry-price img{
				/*width: 40px;*/
				line-height: 50px;
				/*height:50px;*/
				float: left;
			}
			.item-inquiry-price p{
				position: relative;
			    height: 21px;
				font-size: 12px;
				padding-left: 10px;
				margin-bottom: 0px;
			}
			
			.item-inquiry-price .item-price{
				height: 21px;
				font-size: 12px;
				padding-left: 10px;
				color: #8cb33e;
			}
			
			.mui-segmented-control.mui-scroll-wrapper {
				height: 180px;
			}
			.jingdian p{
				word-break:normal;
			}
			
			
			
			.BoxDetails {
				border-top: 1px solid #EEEEEE;
			}
			
			.BoxDetailsTop {
				height: 50px;
			}
			
			.BoxDetailsTopImg {
				float: left;
				height: 40px;
				width: 40px;
				border-radius: 50%;
				margin-top: 5px;
				margin-left: 10px;
			}
			
			.BoxDetailsTopName {
				float: left;
				height: 50px;
				line-height: 50px;
				margin-left: 10px;
				font-size: 13px;
			}
			
			.BoxDetailsTopTime {
				float: right;
				font-size: 12px;
				color: #858182;
				height: 50px;
				line-height: 50px;
				margin-right: 10px;
			}
			
			.BoxDetailsContent {
				margin-top: 5px;
				padding: 0px 10px 0px 10px;
				font-size: 12px;
				color: #666;
			}
			
			.BoxDetailsImg {
				margin: 10px;
				overflow: hidden;
			}
			
			.BoxDetailsImgItem {
				float: left;
				width: 95px;
				height: 95px;
				margin: 0px 5px 5px 0px;
			}
			
			.BodDetailsKuanshi {
				/*float: right;*/
				height: 30px;
				width: 100%;
				padding: 0px 10px 10px 10px;
				font-size: 12px;
				color: #A3A3A3;
			}
			
			.dynamic .dynamic-box{
				padding: 10px 10px;
				
			}
			
			.dynamic .item-dynamic-box{
				position: relative;
				padding: 10px 10px;
				border: 1px solid #CCCCCC;
			}
			.dynamic .item-dynamic-box .item-d-img{
				width: 100%;
				height: 150px;
			}
			.dynamic .item-dynamic-box .item-dynamic-d-title{
				position: absolute;
				top: 10px;
				left: 25px;
				padding: 0 10px;
				color: white;
				font-size: 14px;
				background-color: #1ABC9C;
			}
			
			.dynamic .item-dynamic-footer{
				width: 100%;
				height: 50px;
				line-height: 50px;
				padding: 0 10px;
				margin-bottom: 10px;
				border-bottom: 1px solid #CCCCCC;
				border-left: 1px solid #CCCCCC;
				border-right: 1px solid #CCCCCC;
				font-size: 12px;
				color: #999999;
			}
			
		</style>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">名医工作室</h1>
		    <!--<a class="mui-pull-right mui-icon mui-icon-compose">-->
		    <a class="mui-pull-right mui-icon mui-icon-gear" style="margin-right: 10px;" id="GoSetting">
		    </a>
		</header>
		
		<div class="mui-content mui-scroll-wrapper">
		    <div class="mui-scroll">
		    	
		   
		    	<div id="top">
		    	
		    		<div class="mui-pull-left info_img">
		    			<img src="http://up.qqya.com/allimg/201710-t/17-101804_132321.jpg">
		    		</div>
		    		
		    		<div class="mui-pull-right doc-info">
		    			<div class="doc-1">
		    				<span class="doc-name">何川</span>
		    				<span class="doc-title">副主任医师</span>
		    				<div class="doc-my">
		    					<span class="mui-icon mui-icon-gear"></span>
		    					<span style="margin-left: -3px;">名医</span>
		    				</div>
						</div>
						<div class="doc-1">
							<span class="doc-title">骨外科(3楼)</span>
							<span class="doc-title" style="margin-left: 15px;">武汉同济医院</span>
						</div>
						
						<div class="doc-1 info_tag_box">
							<span class="tag">颌骨骨折</span>
							<span class="tag">腰部慢性劳损</span>
							<span class="tag">骨折</span>
							
						</div>
		    		</div>
		    		
		    
				</div>
				
				<div class="bg"></div>
				<!--医生擅长-->
				<div class="begood">
					<div class="box-top">医生简介</div>
					<P id="begood-info" class="text-line-4">
						从事骨科专业近20年，经过严格的大学本科骨科硕士和博士研究生学习，受教于中国工程院卢世璧院士，并经高级骨科医师训练班培训，具有扎实的专业理论和技能，主译和编辑专著四部，参加编译四部，发表专业论著三十余篇，现为骨科硕士研究生导师。
					</p>
					<p id="more_p_id" style="text-align: center;">
						<span id="more_id" class="mui-icon mui-icon-arrowdown"></span>
					</p>
				</div>
				<div class="bg"></div>
				
				<!--问诊价格-->
				<div class="inquiry-price">
					
					<div class="item-inquiry-price">
						<!--<img style="width: 30px;" src="../img/studio/studio_1.png" />-->
						<div class="mui-pull-left">
							<p>图文问诊</p>
							<p class="item-price">99元起</p>
						</div>
						
					</div>
					
					<div class="item-inquiry-price">
						<!--<img style="width: 30px;" src="../img/studio/studio_2.png" />-->
						<div class="mui-pull-left">
							<p>视频问诊</p>
							<p class="item-price">99元起</p>
						</div>
					</div>	
					
					<div class="item-inquiry-price">
						<!--<img style="width: 30px;" src="../img/studio/studio_3.png" />-->
						<div class="mui-pull-left">
							<p>去挂号</p>
							<p class="item-price">99元起</p>
						</div>
					</div>	
				</div>
				
				<div class="bg"></div>
				
				<div class="jingdian">
					<div class="box-top">经典案列</div>
					<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div class="mui-scroll">
							<ul">
								<li style="display: inline-block;  width:200px;">
									<img width="100%" src="../img/BANNER.jpg"/>
									<p style="white-space:pre-wrap;width:200px;">从小到大，我一直都是十分坚强的，虽然我是个女孩子....</p >
								</li>
							</ul>				
						</div>
					</div>
				</div>
				
				<div class="bg"></div>
				
				<div class="bg"></div>
				
				<div class="dynamic">
					<div class="box-top">名医动态</div>
					<div class="dynamic-box">
						
						<div class="item-dynamic-box">
							<img class="item-d-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545308566379&di=a700e2bb50ddefc7f037b2593d1f07c3&imgtype=0&src=http%3A%2F%2Fp5.so.qhimgs1.com%2Ft01f78b4149f3ca034b.jpg">
							<span class="item-dynamic-d-title">肾脏养生</span>
							<h4>微小病性肾病可以自愈吗</h4>
							<div style="color: #666;font-size: 12px;">
								　微小病性肾病是一种细菌或病毒感染引起的肾脏疾病。通常会给患者带来肾脏疼痛，腰膝酸软等不良反应。在得了微小病性肾病以后...
							</div>
							<p style="margin-top: 10px;">标签: <span style="color: #8cb33e;font-size: 12px;"> #肾脏科</span></p>
						</div>
						<div class="item-dynamic-footer">
							<span class="mui-pull-left">1周前</span>
							
							<div class="mui-pull-right">
								<span class="mui-icon mui-icon-chatbubble"></span>1001
							
								<span class="mui-icon mui-icon-chatbubble"></span>100
							
								<span class="mui-icon mui-icon-chatbubble"></span>99
							</div>
							
						</div>
							
					</div>
				</div>
		    </div>
		</div>
		
		
		
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		<script>
			String.prototype.endWith=function(endStr){
		      	var d=this.length-endStr.length;
		      	return (d>=0&&this.lastIndexOf(endStr)==d)
		 	}
		</script>
		<script type="text/javascript">
			mui.init();
			mui('.mui-scroll-wrapper').scroll({
				bounce: true,
				indicators: true,
				deceleration: mui.os.ios ? 0.003 : 0.0009
			});
			
			//跳转到名医工作室
			
			document.getElementById("GoSetting").addEventListener("tap", function() {
				 //打开关于页面
				  	mui.openWindow({
					    url: 'doctorWork.html', 
					    id: 'doctorWork.html',
					    styles:{
					      	top: '0',
				      		bottom: '0'
					      }
						});
				});
			
			$(function(){
				docInfo();
			})
			
			function docInfo(){
				var begood_info = $("#begood-info").text();
				var more_p = $("#more_p_id");
				var more_span = $("#more_id");
				
				if(begood_info.endWith("...")){
					//有，显示
					$("#more_p_id").addClass("mui-icon-arrowdown");
				}
			}
			
			document.getElementById("more_p_id").addEventListener("tap", function() {
				
				var more_p = $("#more_p_id");
				var more_span = $("#more_id");
				
				if($("#more_id").hasClass("mui-icon-arrowdown")){
					$("#more_id").removeClass("mui-icon-arrowdown");
					$("#more_id").addClass("mui-icon-arrowup");
					$("#begood-info").removeClass("text-line-4");
					
					$(".begood").css({"display":"block","height":"auto"});
				}else{
					$("#more_id").removeClass("mui-icon-arrowup");
					$("#more_id").addClass("mui-icon-arrowdown");
					$("#begood-info").addClass("text-line-4");
					$(".begood").css({"display":"block","height":"161px"});
				}
		
			}) 
			
			
		</script>
	</body>

</html>